<template>
    <div class="app-container">
        <!-- 条件查询 -->
         <el-form :inline="true" :model="query" size="mini">
            <el-form-item label="标签名称">
                <el-input v-model.trim="query.name"></el-input>
            </el-form-item>
            <el-form-item label="分类名称">
                <el-select v-model="query.categoryId" clearable filterable>
                <el-option
                    v-for="item in categoryList"
                    :key="item.id" 
                    :label="item.name" 
                    :value="item.id">
                 </el-option>
               </el-select>
            </el-form-item>
            <el-form-item>
                <el-button icon="el-icon-search" type="primary" @click="queryData">查询</el-button>
                <el-button  icon="el-icon-refresh" @click="reload">重置</el-button>
                <el-button  icon="el-icon-plus" type="primary"  @click="openAdd"> 新增</el-button>
            </el-form-item>
        </el-form>
        <!-- tabel主题 -->
        <el-table :data="list" stripe style="width: 100%">
            <el-table-column  label="序号" width="60" type="index"></el-table-column>
            <el-table-column prop="name" align="center" label="标签名称"></el-table-column>
            <el-table-column prop="categoryName" label="分类名称"></el-table-column>
            <el-table-column  label="操作" >
                 <template slot-scope="scope">
                    <el-button type="success" @click="handleEdit(scope.row.id)" size="mini">编辑</el-button>
                    <el-button type="danger"  @click="handleDelete(scope.row.id)" size="mini">删除</el-button>
                </template>
            </el-table-column>            
        </el-table>

        <!-- 分页管理组件 -->
         <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="page.current"
            :page-sizes="[10, 20, 50]"
            :page-size="page.size"
            layout="total, sizes, prev, pager, next, jumper"
            :total="page.total">
        </el-pagination>

        <!-- 新增编辑组件 -->
        <edit :title="edit.title" 
              :visible="edit.visible"
              :formData="edit.formData"
              :categoryList="categoryList"
              :remoteClose="remoteClose"
        ></edit>
    </div>
</template>

<script>
import api from '@/api/label'
import categoryApi from '@/api/category'
import Edit from '@/views/label/edit'
export default {
    name:"Label",
    components:{
        Edit
    },
    data(){
        return {
            list:[], //封装列表数据
            page:{ //分页对象
                current:1,
                size:20,
                total:0
            },
            query:{}, //条件查询
            categoryList:[], //正常状态的分类
            edit:{ //子组件引用属性对象
                title:'',
                visible:false,
                formData:{}
            }
        }
    },
    created(){
        this.fetchData()
        //获取正常状态的分类列表数据
        this.getCategoryList()
    },
    methods:{
        fetchData(){
            api.getList(this.query,this.page.current,this.page.size).then(res=>{
                this.list = res.data.records
                this.page.total = res.data.total
            })
        },
        handleEdit(id){
            //编辑
            api.getById(id).then(res =>{
                if(res.code === 20000){
                    //数据进行回选
                    this.edit.formData = res.data
                    //弹出窗口
                    this.edit.visible = true
                    this.edit.title = "编辑"
                }
            })
        },
        handleDelete(id){            
            //删除标签
            this.$confirm('确认删除这条记录吗？', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
            }).then(() => {
                //发送删除请求  
                api.deleteById(id).then(res=>{
                    //处理响应结果
                    this.$message({
                        type: res.code === 20000 ? "success":"error",
                        message: res.message
                    });
                  //刷新列表
                  this.fetchData()                   
                })          
            }).catch(() => {
                //取消删除
            });
        },
        //每页显示多少条，改变后触发
        handleSizeChange(val){
            this.page.size = val
            this.fetchData()
        },
        //当前处于多少页
        handleCurrentChange(val){
            this.page.current = val
            this.fetchData()
        },
        //获取正常状态的分类列表数据
        getCategoryList(){
            categoryApi.getNormalList().then(res=>{
                this.categoryList = res.data
            })
        },
        //条件查询
        queryData(){
            //将页码变为第一页
            this.page.current = 1
            this.fetchData()
        },
        //重置
        reload(){
            this.query = {}
            this.fetchData()
        },
        //打开新增窗口s
        openAdd(){
            this.getCategoryList()
            this.edit.visible = true
            this.edit.title = "新增"
        },
        remoteClose(){
            this.formData = {}
            this.edit.visible = false
            this.fetchData()
        }
    }
}
</script>

<style scoped>

</style>
